import { Empty, Grid, Message } from '@arco-design/web-react';
import { useEffect, useState } from 'react';
import DetailModal from '../../../components/detailModal';
import { confirmDialog } from '../../../components/dialog';
import LoadingMask from '../../../components/loadingMask';
import { dictTag, tagCopy, tooltipEllipsis100 } from '../../../components/tableColumn';
import {getDict} from '../../../utils/utils';
import { apiGetCardBuyLimitRecordList, apiRemoveCardBuyLimitRecord } from './api';
import { CardDetail,  } from '../../../types';
import {CardPayLimitRecord} from './types'
interface Props {
  item: CardDetail;
  onCancel: (update?: boolean) => void;
}
/** 限制入口 */
const COMMON_RECORD_INTERFACE = 'common_record_interface';
/** 生效状态 */
const COMMON_EFFECT_STATUS = 'common_effect_status';
/** 生效状态 */
const CARD_DETAIL_EXTEND_BUSINESS_TYPE = 'card_detail_extend_business_type';
export default function CardPayLimitRecordDialog({ item, onCancel }: Props) {
  let [list, setList] = useState<CardPayLimitRecord[]>([]);
  let [errorData, setErrorData] = useState('');
  let [willRefresh, setWillRefresh] = useState(false);
  const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
  useEffect(() => {
    async function fetchDictData() {
      const data = await getDict(COMMON_RECORD_INTERFACE, COMMON_EFFECT_STATUS, CARD_DETAIL_EXTEND_BUSINESS_TYPE);
      setDictDatas(data);
    }

    fetchDictData();
  }, []);
  useEffect(() => {
    loadList();
  }, []); // eslint-disable-line

  async function loadList() {
    LoadingMask.show('正在加载...');
    try {
      let res = await apiGetCardBuyLimitRecordList(item.id!);
      let data = res.data;
      if (data.code === 200) {
        setList(data.data ?? []);
      } else {
        setErrorData(data.msg ?? '加载失败');
      }
    } catch (e: any) {
      setErrorData(e.message ?? '加载失败');
    } finally {
      LoadingMask.hide();
    }
  }
  async function handleRemove(i: CardPayLimitRecord) {
    let limitStr = (dictDatas[CARD_DETAIL_EXTEND_BUSINESS_TYPE] ?? []).find(
      (j:any) => j.dictValue === i.businessType
    )?.dictLabel;
    let modalRes = await confirmDialog({
      title: '提示',
      content: `确定要移除【${item.sysUser?.phonenumber}】用户名下卡片【${item.iccid}】的【${limitStr}】限制吗？`,
    });
    if (!modalRes) return;
    LoadingMask.show('正在移除...');
    try {
      let res = await apiRemoveCardBuyLimitRecord(i.id!);
      let data = res.data;
      if (data.code === 200) {
        Message.success(data.msg ?? '移除成功');
        loadList();
        setWillRefresh(true);
      } else {
        Message.success(data.msg ?? '移除失败');
      }
    } catch (e: any) {
      Message.success(e.message ?? '移除失败');
    } finally {
      LoadingMask.hide();
    }
  }

  function handleConfirm() {
    onCancel(willRefresh);
  }

  return (
    <DetailModal
      title={`【${item.iccid}】限制方式`}
      show
      className="bw-80"
      cancelBtnShow={false}
      confirmText="关闭"
      onCancel={handleConfirm}
      onConfirm={handleConfirm}
    >
      <div className="bw-100">
        <Grid.Row className="border-bottom font-widget-600">
          <Grid.Col span={3} className="p-10">
            限制入口
          </Grid.Col>
          <Grid.Col span={3} className="p-10 ">
            业务流水
          </Grid.Col>
          <Grid.Col span={4} className="p-10 ">
            限制类型
          </Grid.Col>
          <Grid.Col span={4} className="p-10 ">
            限制原因
          </Grid.Col>
          <Grid.Col span={3} className="p-10 ">
            限制时间
          </Grid.Col>
          <Grid.Col span={2} className="p-10 ">
            状态
          </Grid.Col>
          <Grid.Col span={3} className="p-10 ">
            创建时间
          </Grid.Col>
          <Grid.Col span={2} className="p-10 ">
            操作
          </Grid.Col>
        </Grid.Row>
        {!list.length && <Empty description={errorData ?? '暂无数据'} />}
        {!!list.length &&
          list.map((i) => (
            <Grid.Row className="border-bottom" key={i.id}>
              <Grid.Col span={3} className="p-10">
                {dictTag(i.businessData?.limitRecordInterface, dictDatas[COMMON_RECORD_INTERFACE])}
              </Grid.Col>
              <Grid.Col span={3} className="p-10 ">
                {tagCopy(i.businessData?.limitRecordBusinessId)}
              </Grid.Col>
              <Grid.Col span={4} className="p-10 ">
                {dictTag(i.businessType, dictDatas[CARD_DETAIL_EXTEND_BUSINESS_TYPE])}
              </Grid.Col>
              <Grid.Col span={4} className="p-10 ">
                {tooltipEllipsis100(i.businessData?.limitRecordLimitReason)}
              </Grid.Col>
              <Grid.Col span={3} className="p-10 ">
                {i.businessData?.limitRecordTime}
              </Grid.Col>
              <Grid.Col span={2} className="p-10 ">
                {dictTag(i.businessData?.limitRecordStatus, dictDatas[COMMON_EFFECT_STATUS])}
              </Grid.Col>
              <Grid.Col span={3} className="p-10 ">
                {i.createTime}
              </Grid.Col>
              <Grid.Col span={2} className="p-10 ">
                {/* <HasPermission permission={['card:cardDetailExtend:removeLimitRecord']}> */}
                  <span className="text-red-color cursor-pointer" onClick={() => handleRemove(i)}>
                    删除
                  </span>
                {/* </HasPermission> */}
              </Grid.Col>
            </Grid.Row>
          ))}
      </div>
    </DetailModal>
  );
}
